<template>
    <div>
        <el-container>
            <el-header>
                <div id="title">课程班级</div>
                <div><i class="el-icon-search" id="icon" @click="sea"></i></div>
                <el-input v-model="input" placeholder="搜索班号" id="input"></el-input>
                <div id="jia">创建班级</div>
                <div id="tong">通知</div>
                <div><i class="el-icon-user-solid" id="icon1" @click="handleIcon"></i></div>
            </el-header>
            <el-main id="cot" class="grid-cotainer">
                <div v-for="(course,index) in courses" :key="index" id="kuang" @click="handleCourse(course.id,index)">
                        <div id="name">{{ course.name }}</div>
                        <i class="el-icon-user-solid" id="icon2"></i>
                        <div id="teacher">{{ course.teacher }}</div>
                        <div id="class">班号：{{ course.class }}</div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<style>
.grid-cotainer{
    display:grid;
    grid-template-columns: repeat(3,300px);
    grid-gap:50px;
}
.grid-item{
    padding: 20px;
    border:1px solid;
    border-radius: 5px;
}
  .el-col {
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .bg-purple-light {
    background: #0c2152;
  }
  .bg-purple-dark {
    background: #830608;
  }
  .el-header{
    background-color: rgb(85,85,85);
    color: #333;
    text-align: center;
    line-height: 80px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  #title{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:80px;
  }
  #icon{
    color: white;
    font-size: 25px;
    position: absolute;
    top:30px;
    left:700px;
  }
  #input{
    height:33px;
    width:230px;
    position: absolute;
    top:-30px;
    left:700px;
  }
  #jia{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1000px;
  }
  #tong{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1200px;
  }
  #icon1{
    color: white;
    font-size:40px;
    position: absolute;
    top:20px;
    left: 1350px;
  }
  #cot{
    position:absolute;
    top:100px;
    left:280px;
    background-color: white;
  }
  #kuang{
    height: 150px;
    background-color: rgb(171, 246, 246,0.3);
    position: relative;
  }
  #name{
    position:absolute;
    top:-50px;
    left:20px;
  }
  #icon2{
    font-size: 30px;
    position:absolute;
    top: 100px;
    left:26px;
  }
  #teacher{
    position:absolute;
    top:35px;
    left:60px;
  }
  #class{
    position: absolute;
    top:35px;
    left:200px
  }
</style>
<script>
import axios from 'axios';


export default {
  data() {
    return {
      input: '',
      courses:[
        { id:1 ,name:'语文',teacher:'李老师', class:1 },
        { id:2 ,name:'数学',teacher:'张老师', class:2 },
        { id:3 ,name:'英语',teacher:'王老师', class:3 },
        { id:4 ,name:'语文',teacher:'李老师', class:4 },
        { id:5 ,name:'语文',teacher:'陈老师', class:6 },
        { id:6 ,name:'语文',teacher:'李老师', class:10086 },
        { id:7 ,name:'语文',teacher:'张老师', class:149 },
        { id:8 ,name:'语文',teacher:'王老师', class:13 },
      ]//从后端获取。后期删掉
    }
  },
  methods:{
    handleCourse(id,index){
      this.$router.push({
        name:'TeaCourse',
        params:{
          index:index,
          id:id
        }
      })
    },
    mounted(){
      //传出 id-该老师的id
      //传入 courses格式如上courses，课程数组
      axios.post('',{
        id:this.$store.state.ID
      }).then(res=>{
        this.courses=res.data.courses
      })
    },
    sea(){
      //传入为要搜索的班号，
      //传出为对应班号的课程的信息，格式如上courses
      axios.post('',{
        class:this.input
      }).then(res=>{
        if(res.data.success){
          this.courses=res.data.courses
        }
      })
    },
    handleIcon(){
      this.$router.push('/TeaPage')
    }
  }
}
</script>